<template>
  <el-container  class="height100    domainMainContent containerHeight">
    <el-main class="el-mainContent  height100 overflowYHidden"   ref="managerMain">
      <div class="label height100">
        <div class="labelList">
          <div class="seach">
            <el-input
              prefix-icon="el-icon-search"
              :placeholder="$t('placeholder_dep_content')"
              size="mini"
              style="width: 95%; height: 30px;"
              v-model="searchName"
              @keyup.enter.native="searchDepartment"
              >
            </el-input>
            <i class="el-icon-plus" @click="handleAdd"></i>
          </div>
          <div class="lable_item" :class="[selectId == index ? 'label_checked' : '']" v-for="(item,index) in tagsList" :key="index" @click="handleChecked(item,index)">
            <div class="fa fa-tag"></div>
            <div class="tag_name">{{item.tagname}}</div>
            <div class="fa fa-ellipsis-v" @click.stop="edit(index)"></div>
            <div class="tag_dialog" :style="{display: showDialog === index ? 'block' : 'none'}">
              <div style="text-align: left; margin: 0">
                <div class="popover_title" @click="handleEdit(item)">修改名称</div>
                <div class="popover_title" @click="handleDelete(item)">删除</div>
              </div>
            </div>
          </div>
        </div>
        <div class="label_table">
          <div class="label_title">{{tagsList && tagsList[selectId] && tagsList[selectId].tagname}}</div>
          <div class="empty" v-if="membersList.length == 0">
            <div class="empty_main">
              <div class="empty_bg"></div>
              <div class="empty_message">当前标签无任何部门或成员</div>
            </div>
            <div class="empty_btn">
              <el-button size="medium" @click="addUserDept">添加部门/成员</el-button>
            </div>
          </div>
          <div class="members" v-else>
            <div class="members_btn">
              <el-button size="medium" @click="addUserDept">添加部门/成员</el-button>
              <el-button size="medium" @click="deleteUserDept">移出</el-button>
            </div>
            <el-table
              ref="multipleTable"
              :data="membersList"
              tooltip-effect="dark"
              class="members_table"
              style="width: 100%"
              @selection-change="onSelectionChange"
              >
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                label="名称"
                width="320">
                <template slot-scope="scope">
                  <i class="el-icon-wallet" v-if="!scope.row.userid"></i>
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column
                label="部门"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.department ?  scope.row.department.name : scope.row.name}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose">
            <el-form :model="form">
              <el-form-item label="标签名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="可使用人" :label-width="formLabelWidth" v-if="dialogTitle == '新建标签'">
                <el-select v-model="form.people" placeholder="">
                  <el-option label="所有管理员" value="01"></el-option>
                  <el-option label="指定人" value="02"></el-option>
                  <el-option label="仅自己" value="03"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="可使用人权限" :label-width="formLabelWidth" v-if="dialogTitle == '新建标签'">
                <el-select v-model="form.authority" placeholder="">
                  <el-option label="仅使用" value="01"></el-option>
                  <el-option label="可编辑" value="02"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
              <el-button type="primary" @click="doSave" size="medium">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog
          title="添加成员/部门到标签"
          :visible.sync="tagsUserDeptDialog"
          width="50%"
          >
          <userDeptDialog
            @checkedUserDeptList="getCheckedUserDeptList"
          ></userDeptDialog>
          <div slot="footer" class="dialog-footer">
            <el-button @click="tagsUserDeptDialog = false" size="mini">取 消</el-button>
            <el-button type="primary" size="mini" @click="handleOk">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import userDeptDialog from "@/components/userDeptDialog.vue"
export default {
  name:'',
  data () {
    return {
      searchName: "",
      dialogTitle: "新建标签",
      dialogVisible: false,
      tagsUserDeptDialog: false,
      visible: false,
      form: {
        name: "",
        people: "01",
        authority: "01"
      },
      tagsList: [],
      formLabelWidth: "120px",
      selectId: 0,
      showDialog: "",
      parmas: {},
      membersList: [],
      checkedList: [],
      multipleSelection: []
    }
  },
  components: {
    userDeptDialog
  },
  created(){
    this.getTags();
  },
  mounted(){
    let that = this;
    document.addEventListener("click",()=>{
      that.showDialog = "";
    })
  },
  methods: {
    edit(key){
      this.showDialog = key
    },
    getCheckedUserDeptList(val){
      this.checkedList = val;
    },
    getTags(){
      let that = this;
      this.$api.getWechatTags(this.$route.query.domainid,{
        onSucess: function(res) {
          let data = res.data;
          if(data.errcode == 0){
            that.tagsList = data.data;
            that.handleChecked(data.data[0],0)
          }
        }
      })
    },
    handleChecked(item,key){
      let that = this;
      this.selectId = key;
      this.$api.getWechatTagsMembers(this.$route.query.domainid,item.tagid,{
        onSucess: function(res) {
          let data = res.data;
          if(data.errcode == 0){
            that.membersList = data.data ? data.data : [];
          }
        }
      })
    },
    handleEdit(item){
      this.form.name = item.tagname;
      this.parmas = item;
      this.dialogTitle = "编辑标签";
      this.dialogVisible = true;
    },
    handleDelete(item){
      let that = this;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deleteWechatTags(this.$route.query.domainid,item.tagid,{
          onSucess: function(res) {
            let data = res.data;
            if(data.errcode == 0){
              that.$message({
                type: 'success',
                message: that.$t("msg_del_success")
              });
              that.getTags();
            }
          }
        })
      }).catch(() => {});
    },
    handleAdd(){
      this.clearForm();
      this.dialogTitle = "新建标签";
      this.dialogVisible = true;
    },
    handleClose(done){
      done();
      this.clearForm();
    },
    searchDepartment(){

    },
    handleOk(){
      let that = this;
      let userlist = [];
      let partylist = [];
      for(let i=0;i<this.checkedList.length;i++){
        if(this.checkedList[i].isUser){
          userlist.push(this.checkedList[i].key)
        }else{
          partylist.push(this.checkedList[i].key)
        }
      }
      let data = {
        "tagid": this.tagsList[this.selectId].tagid,
        "userlist": userlist,
        "partylist": partylist
      }
      this.$api.addWechatMembers(this.$route.query.domainid,data,{
          onSucess: function(res) {
            let data = res.data;
            if(data.errcode == 0){
              that.tagsUserDeptDialog = false;
              that.$message({
                type: 'success',
                message: that.$t("msg_add_success")
              });
              that.handleChecked(that.tagsList[that.selectId],that.selectId);
            }
          }
        })
    },
    clearForm(){
      let form = {
        name: "",
        people: "01",
        authority: "01"
      }
      this.form = form;
      this.$forceUpdate();
    },
    doSave() {
      let that = this;
      if(this.dialogTitle != "新建标签"){
        let data = {
          "tagname": this.form.name,
          "tagid": this.parmas.tagid
        }
        this.$api.updateWechatTags(this.$route.query.domainid,data,{
          onSucess: function(res) {
           if(res.data.errcode == 0){
            that.$message({
              message: that.$t("msg_save_success"),
              type: 'success'
            });
            that.dialogVisible = false;
            that.clearForm();
            that.getTags();
           }
          }
        })
      }else{
        let data = {
          "tagname": this.form.name
        }
        this.$api.CreatWechatTags(this.$route.query.domainid,data,{
          onSucess: function(res) {
           if(res.data.errcode == 0){
            that.$message({
              message: that.$t("msg_save_success"),
              type: 'success'
            });
            that.dialogVisible = false;
            that.clearForm();
            that.getTags();
           }
          }
        })
      }
    },
    addUserDept() {
      this.tagsUserDeptDialog = true;
    },
    onSelectionChange(rows) {
      this.multipleSelection = rows;
    },
    deleteUserDept(){
      let that = this;
      let userlist = [];
      let partylist = [];
      for(let i=0;i<this.multipleSelection.length;i++){
        if(this.multipleSelection[i].userid){
          userlist.push(this.multipleSelection[i].userid)
        }else if(this.multipleSelection[i].id){
          partylist.push(this.multipleSelection[i].id)
        }
      }
      let data = {
        "tagid": this.tagsList[this.selectId].tagid,
        "userlist": userlist,
        "partylist": partylist
      }
      this.$api.deleteWechatTagsMembers(this.$route.query.domainid,data,{
          onSucess: function(res) {
            let data = res.data;
            if(data.errcode == 0){
              that.tagsUserDeptDialog = false;
              that.$message({
                type: 'success',
                message: that.$t("msg_remove_success")
              });
              that.handleChecked(that.tagsList[that.selectId],that.selectId);
            }
          }
        })
    }
  },
}
</script>

<style lang='scss' scoped>
</style>
